{include file='common/doc'}
<style>
    .borders{
        border:1px solid red;
        border-collapse:collapse;
    }
</style>
<body style='padding:10px'>
<button type="button" class="layui-hide" id="files"></button>
<div class="layui-fluid">
    <div id="fileManager" lay-filter="files"></div>
</div>

</body>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        fileManager: 'lib/extend/fileManager' //主入口模块
    }).use(['fileManager', 'layer', 'upload'], function () {
        var fileManager = layui.fileManager
            , $ = layui.$
            , upload = layui.upload
            , layer = layui.layer;
        $('title').html($('title').html() + ' version:' + fileManager.v);
        var upIns = upload.render({
            elem: '#files' //绑定元素
            , url: 'upload' //上传接口
            , field: 'file[]'
        })
        console.log(upIns);
        fileManager.render({
            elem: '#fileManager'
            , method: 'post'
            , id: 'fmfiles'
            , btn_upload: true
            , btn_create: true
            , icon_url: '/upload/ico/'
            , url: 'get_file_data'
            , thumb: {'nopic': '/logo.png', 'width': 100, 'height': 100}
            , parseData: function (res) {
                let _res = [];
                _res.code = 0;
                _res.data = res.images;
                _res.count = res.count
                return _res;
            }
            , done: function (res, curr, count) {
                // console.log(res,curr,count)
            }
            , page: {limit: 100,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
            , where: {}
        });

        //监听图片选择事件
        fileManager.on('pic(files)', function (obj) {
            //obj.obj 当前对象
            //obj.data 当前图片数据
            var data = obj.data;
            $(obj.obj[0]).find('img').addClass('borders');
        });
        //监听图片上传事件
        upIns.config.accept = 'file';
        fileManager.on('uploadfile(files)', function (obj) {
            //obj.obj 当前对象
            //obj.path 路径
            //更改上传组件参数
            upIns.config.data = {'path': obj.path};
            upIns.config.done = function (res) {
            };
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("files").dispatchEvent(e)
        });
        //监听新建文件夹事件
        fileManager.on('new_dir(files)', function (obj) {
            //obj.obj 当前对象
            //obj.folder 文件夹名称
            //obj.path 路径

            $.post('folder', {'folder': obj.folder, 'path': obj.path}, function (e) {
                layer.msg(e.msg);
                if (e.code == 1) {
                    fileManager.reload('fmfiles');
                }
            })
        });

    });
</script>

</html>
